/*
 * @Author: wangguanqing 
 * @Date: 2018-06-29 09:10:14 
 * @Last Modified by: hy
 * @Last Modified time: 2018-08-22 14:18:05
 */
<template>
  <div class="gq_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main" class="transportData">
        <div class="map">
          <trans-port-map v-model="mapData"></trans-port-map>
          <div class="stage"> 
            <span class="centerTit">浩德智运平台</span> 
            <div class="leftTit"> 
              <span>注册车辆数</span> 
              <span>{{baseData.registered}}</span> 
            </div>
            <div class="rightTit"> 
              <span>注册用户数</span>
              <span>{{baseData.vehicle}}</span>
            </div>
          </div>
          
        </div>
        <div class="dataDisplay">
          <top-logo-title>
            <div slot="topTitle">浩德智运DashBoard</div>
          </top-logo-title>
          <div class="chart">
            <div class="topView">
              <div class="dataQuantity">
                <div class="item">
                  <p>日配货量(吨)</p>
                  <turn-page-num :numStyle="'margin-top:5px'" v-model="baseData.daily"></turn-page-num><span class="smallUnit"></span>
                </div>
                <div class="item">
                  <p>在途运量(吨)</p>
                  <turn-page-num :numStyle="'margin-top:5px'" v-model="baseData.traffic"></turn-page-num>
                </div>
              </div>
            </div>
            <div class="leftView">
              <div class="top">
                <main-title>
                  <span slot="title">车源发布</span>
                  <span slot="number">{{carSourceTotal}}<span style="font-size: 22px">(辆)</span></span>
                </main-title>
                <!-- 配货车辆列表 位置 -->
                <div class="vehicleList">
                  <ul id="ulContent">
                    <li v-for="(item,index) in carSourceList" :key="index">
                      <img class="picture" :src="'../../../../../static/img/gq/timg'+ carSourceImg[Math.round(Math.random() * 5)] + '.jpg'" />
                      <div class="txt">
                        <p>{{item.license}}<span class="textMini"> / {{item.place}}</span></p>
                        <p>{{item.capacity}}T / {{item.car}}</p>
                      </div>
                    </li>
                </ul>
              </div>
              <div class="mid">
                <main-title>
                  <span slot="title">空载车辆区域分布</span>
                </main-title>
                <div class="midChart">
                  <text-chart v-model="vehicleAreaArr"></text-chart>
                </div>
              </div>
              </div>
              <div class="bot">
                <main-title>
                  <span slot="title">配货量地域分布(吨)</span>
                </main-title>
                <div style="width:456px;height:102px;">
                  <bar-chart slot="main" v-model="distributionArr" :option="barChartOption" :chartStyle="'width:506px;height:230px;min-height:200px;'"></bar-chart>
                </div>
              </div>
              <!-- 边线 -->
              <svg class="line" xmlns="http:// www.w3.org/2000/svg" viewBox="0 0 408.5 795.25">
                <path class="d-path" d="m0.75,0.625l89.25,-0.625l39,39l0,491l278,264" />
                <path class="d-fill" d="m0.75,0.625l89.25,-0.625l39,39l0,491l278,264" />
                <circle fill="#28e787" cx="406.5" cy="793.25" r="2" />
              </svg>
            </div>
            
            <div class="rightView">
              <div class="top">
                <main-title>
                  <span slot="title">货源发布</span>
                  <span slot="number">{{supplyOfGoodsList.total}}<span style="font-size: 22px">(吨)</span></span>
                </main-title>
                <!-- 在线配货列表 位置 -->
                <div class="onlineList">
                  <ul id="onLine">
                      <li v-for="(item,index) in supplyOfGoodsList.list" :key="index">
                        <img class="picture" :src="'../../../../../static/img/gq/user'+ goodsSourceImg[Math.round(Math.random() * 5)] + '.jpg'"/>
                        <div class="txt">
                          <p> <span>{{item.originating}}</span> <i></i> <span>{{item.destination}}</span> </p>
                          <p> <span>{{item.goods}}</span> <span>{{item.volume}}T</span> </p>
                        </div>
                      </li>

                      <!-- <li>
                        <img class="picture" src="../../../../../static/img/gq/user2.jpg" />
                        <div class="txt">
                          <p> <span>运城</span> <i></i> <span>西安</span> </p>
                          <p> <span>盘螺</span> <span>28.774T</span> </p>
                        </div>
                      </li>

                      <li>
                        <img class="picture" src="../../../../../static/img/gq/user3.jpg" />
                        <div class="txt">
                          <p> <span>苏州</span> <i></i> <span>上海</span> </p>
                          <p> <span>线材</span> <span>53.28T</span> </p>
                        </div>
                      </li>
                      <li>
                        <img class="picture" src="../../../../../static/img/gq/user4.jpg" />
                        <div class="txt">
                          <p> <span>太原</span> <i></i> <span>石堰</span> </p>
                          <p> <span>钢坯</span> <span>46.425T</span> </p>
                        </div>
                      </li> -->
                  </ul>
                </div>
              </div>
              <!-- 货源类型占比 -->
              <div class="mid">
                <main-title>
                  <span slot="title">货源类型占比</span>
                </main-title>
                <div class="midChart">
                  <pie-chart :chartStyle="'min-width:225px;min-height:265px'" v-model="shopOrderArr" :option="shopOrderOption"></pie-chart>
                </div>
              </div>
              <div class="bot">
                <main-title>
                  <span slot="title">配货量趋势(吨)</span>
                </main-title>
                <!-- lineChart 位置 -->
                <div class="goodsTrend">
                  <line-chart v-model="livenessArr" :chartStyle="'width:414px;min-height:200px;height: 200px'" :option="lineChartOption"></line-chart>
                </div>
              </div>
              <!-- 边线 -->
              <svg class="line" xmlns="http:// www.w3.org/2000/svg" viewBox="0 0 317.18 796.18">
                <polyline class="g-path" points="317 0.18 282 35.18 282 514.18 1.5 794.68" />
                <polyline class="g-fill" points="317 0.18 282 35.18 282 514.18 1.5 794.68" />
                <circle fill="#28e787" cx="2" cy="794.18" r="2" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
require("@/components/gq/l-slide.js");
import topLogoTitle from "@/components/gq/topLogoTitle";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import mainTitle from "@/components/gq/mainTitle";
import bgLayOut from "@/components/bgLayOut/index";
import transPortMap from "@/components/gq/transPortMap.vue";
import textChart from "@/components/gq/textChart.vue";
import pieChart from "@/components/Charts/pieChart.vue";
import turnPageNum from "@/components/turnPageNum/index.vue";
import {
  GetSteelRingEcommerceData,
  GetDataByTarget,
  GetDetailList,
  GetVehicleSourceList,
  GetSourceReleaseList,
  GetSourceReleaseForMapList
} from "@/api/gq/SteelRingForLogistics";
export default {
  name: "index",
  components: {
    topLogoTitle,
    transPortMap,
    barChart,
    mainTitle,
    lineChart,
    bgLayOut,
    textChart,
    pieChart,
    turnPageNum
  },
  mounted() {
    this.fetchData();
    this.autoTimer = setInterval(() => {
      // 静默请求
      this.$utils.showLoading = false;
      this.fetchData();
    }, 300000);
  },
  beforeDestroy() {
    clearInterval(this.autoTimer);
  },
  data() {
    return {
      autoTimer: null,
      carSourceImg: ["", "1", "2", "3", "4", "5"],
      goodsSourceImg: ["", "1", "2", "3", "4", "5"],
      mapData: [],
      carSourceTotal: 0, //  车源总数
      carSourceList: [], //  车源列表
      supplyOfGoodsList: {}, //  货源列表
      baseData: {
        daily: 0,
        traffic: 0,
        registered: 0,
        vehicle: 0
      }, //  基础数据
      total: "1234",
      shopOrderArr: [],
      shopOrderOption: {
        legendColor: "#28E787",
        color: [
          "#F0BD26",
          "#28E787",
          "#00D1FF",
          "#c19d05",
          "#00a54e",
          "#06c1af",
          "#8db70b",
          "#edc418"
        ],
        radius: ["40%", "70%"],
        center: ["40%", "50%"],
        roseType: "radius",
        startAngle: 250,
        hidePieMargin: true,
        showLine: false,
        showLabel: false,
        legend: {
          left: 20
        }
      },
      vehicleAreaArr: [], //  空载车辆区域分布
      distributionArr: {}, //  配货量地域分布
      livenessArr: [], //  配货量趋势
      barChartOption: {
        openDataZoom: true,
        grid: {
          top: 30,
          bottom: 80
        },
        color: "rgb(40, 231, 135)",
        tooltip: {
          show: false
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            formatter: function(value) {
              var ret = ""; // 拼接加\n返回的类目项
              var maxLength = 1; // 每项显示文字个数
              var valLength = value.length; // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; // 每次截取的字符串
                  var start = i * maxLength; // 开始截取的位置
                  var end = start + maxLength; // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; // 凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            rotate: 0,
            color: "rgb(40, 231, 135)",
            rich: {
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "#28E787",
        endColor: "#006953"
      },
      lineChartOption: {
        grid: {
          top: 30,
          left: 80,
          bottom: 60
        },
        showSymbol: "none",
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 45,
            rich: {
              //  x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40, 231, 135,0.7)",
        endColor: "rgba(40, 231, 135,0.2)",
        color: "rgb(40, 231, 135)"
      }
    };
  },
  methods: {
    fetchData() {
      this.fetchGetSourceReleaseForMapList(); //  地图数据
      this.fetchBaseData(); //  获取基础数据
      this.fetchVehicel();
      this.fetchDistributionArr(); //  配货量区域分布
      this.fetchLivenessArr();
      this.fetchGoodsType();
      this.fetchCarSourceList(); //  车源列表
      this.fetchSupplyOfGoodsList(); //  货源列表
      this.setTotal();
      this.onlineListFun();
      this.vehicleListFun();
    },

    //   基础数据
    async fetchGetSourceReleaseForMapList() {
      try {
        var res = await GetSourceReleaseForMapList();
        if (res.data.code === "0") {
          this.$set(this, "mapData", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //   基础数据
    async fetchBaseData() {
      try {
        var res = await GetSteelRingEcommerceData();
        if (res.data.code === "0") {
          this.$set(this, "baseData", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //   货源类型
    async fetchGoodsType() {
      const p = {
        queryType: "44003"
      };
      try {
        var res = await GetDataByTarget(p);
        if (res.data.code === "0") {
          this.$set(this, "shopOrderArr", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //   空载车辆区域
    async fetchVehicel() {
      const p = {
        queryType: "44001"
      };
      try {
        var res = await GetDataByTarget(p);
        if (res.data.code === "0") {
          this.$set(this, "vehicleAreaArr", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  配货量区域分布
    async fetchDistributionArr() {
      const p = {
        queryType: "44002"
      };
      try {
        var res = await GetDataByTarget(p);
        if (res.data.code === "0") {
          this.$set(this, "distributionArr", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  配货量趋势
    async fetchLivenessArr() {
      const p = {
        startTime: "2018-07-12",
        endTime: "2018-07-19",
        queryType: "44004"
      };
      try {
        var res = await GetDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(item => {
            item.xData = item.xData.slice(5, item.xData.length);
          });
          this.$set(this, "livenessArr", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  车源列表
    async fetchCarSourceList() {
      try {
        var res = await GetVehicleSourceList();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "carSourceTotal", resData.total);
          this.$set(this, "carSourceList", resData.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  货源列表
    async fetchSupplyOfGoodsList() {
      try {
        var res = await GetSourceReleaseList();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "supplyOfGoodsList", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    setTotal() {
      this.$set(this, "total", 119054);
    },
    vehicleListFun() {
      var liHeight = $("li").height();
      $("#ulContent").lSlide({ nTop: liHeight });
    },
    onlineListFun() {
      var liHeight = $("li").height();
      $("#onLine").lSlide({ nTop: liHeight });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";
.smallUnit {
  align-self: flex-end;
  margin-left: 5px;
  font-size: 20px;
  font-size: 10px;
  color: #f0bd26;
}
.transportData {
  .map {
    display: flex;
    justify-content: center;
    @include absoluteAllSides(110, 0, 0, 0, 1);
    .stage {
      position: absolute;
      bottom: 0;
      z-index: -1;
      background-image: url("../../../../../static/img/gq/transPort.png");
      background-position: center bottom;
      background-size: 100% 100%;
      width: 740px;
      text-align: center;
      height: 732px;
      .centerTit {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 120px;
        z-index: 1;
        width: 180px;
        height: initial;
        margin: 0 auto;
        color: #28e787;
        font-size: 26px;
        font-weight: bold;
        text-shadow: 0 0 30px #000;
      }
      .leftTit {
        position: absolute;
        right: 60px;
        bottom: 30px;
        z-index: 1;
        width: 180px;
        height: initial;
        margin: 0 auto;
        text-align: center;
        color: #f0bd26;
        font-weight: bold;
        text-shadow: 0 0 30px #000;
        span:nth-of-type(1) {
          font-size: 25px;
        }
        span:nth-of-type(2) {
          font-size: 32px;
        }
      }
      .rightTit {
        position: absolute;
        left: 60px;
        bottom: 30px;
        z-index: 1;
        width: 180px;
        height: initial;
        margin: 0 auto;
        color: #f0bd26;
        font-weight: bold;
        text-shadow: 0 0 30px #000;
        span:nth-of-type(1) {
          font-size: 25px;
        }
        span:nth-of-type(2) {
          font-size: 32px;
        }
      }
    }
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    & .chart {
      @include absoluteAllSides(140, 50, 0, 47, 1);
      #ulContent {
        width: 100%;
        height: 100%;
        color: white;
        //  margin: 100px auto;
        overflow: auto;
      }
      .topView {
        display: flex;
        justify-content: center;
        position: relative;
        top: 40px;
        .dataQuantity {
          display: flex;
          align-items: center;
          .item {
            p:nth-of-type(1) {
              margin-bottom: 10px;
              color: #28e787;
              font-size: 24px;
            }
            p:nth-of-type(2) span {
              display: inline-block;
              width: 50px;
              height: 100px;
              color: #f0bd26;
              @include din(75px);
              text-align: center;
              background: rgba(#006953, 0.5);
            }
          }
          .item {
            margin-right: 62px;
            font-size: 28px;
            font-weight: bold;
          }
          .item:nth-last-of-type(1) {
            margin-right: 0;
          }
        }
      }

      .leftView {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 616px;
        .top {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          .vehicleList {
            width: 400px;
            height: 220px;
            margin-top: 35px;
            ul {
              li {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                .picture {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  object-fit: cover;
                }
                .txt {
                  margin-left: 12px;
                  color: #28e787;
                  p:nth-of-type(1) {
                    font-size: 20px;
                  }
                  p:nth-of-type(2) {
                    font-size: 16px;
                  }
                  .textMini {
                    font-size: 16px;
                  }
                }
              }
              li:nth-last-of-tyoe(1) {
                margin-bottom: 0;
              }
            }
          }
        }
        .mid {
          position: absolute;
          top: 313px;
          left: 0;
          z-index: 1;
          .midChart {
            margin-top: 20px;
          }
        }
        .bot {
          position: absolute;
          bottom: 147px;
          left: 0;
          z-index: 1;
        }
        .line {
          position: absolute;
          top: 20px;
          left: 219px;
          z-index: 1;
          width: 409px;
          height: 795px;
          & .d-path {
            fill: none;
            stroke-width: 0.5;
            stroke: #28e787;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-miterlimit: 10;
          }

          & .d-fill {
            fill: none;
            stroke-width: 1;
            stroke: #28e787;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-dasharray: 0, 0;
            stroke-dashoffset: 100;
            animation: lineMove1 7s linear infinite;
          }
          @keyframes lineMove1 {
            0% {
              stroke-dasharray: 0, 1200;
            }
            100% {
              stroke-dasharray: 1200, 1200;
            }
          }
        }
      }

      .rightView {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 608px;
        .top {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          .onlineList {
            width: 269px;
            height: 220px;
            margin-top: 35px;
            overflow: hidden;
            ul {
              li {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                .picture {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  object-fit: cover;
                }
                .txt {
                  margin-left: 12px;
                  color: #28e787;
                  p:nth-of-type(1) {
                    @include flex-ic-jsb;
                    font-size: 20px;
                    i {
                      width: 34px;
                      height: 5px;
                      margin: 0 20px;
                      background: url("../../../../../static/img/gq/icon2.png")
                        center no-repeat;
                      background-size: 100% 100%;
                    }
                  }
                  p:nth-of-type(2) {
                    @include flex-ic-jsb;
                    font-size: 16px;
                  }
                }
              }
              li:nth-last-of-tyoe(1) {
                margin-bottom: 0;
              }
            }
          }
        }
        .mid {
          position: absolute;
          top: 313px;
          right: 0;
          z-index: 1;
          .midChart {
            width: 273px;
          }
        }
        .bot {
          position: absolute;
          right: 0;
          bottom: 147px;
          z-index: 1;
          .goodsTrend {
            width: 384px;
            height: 102px;
            margin-right: -20px;
          }
        }
        .line {
          position: absolute;
          top: 20px;
          right: 285px;
          z-index: 1;
          width: 317px;
          height: 796px;
          & .g-path {
            fill: none;
            stroke-width: 0.5;
            stroke: #28e787;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-miterlimit: 10;
          }
          & .g-fill {
            fill: none;
            stroke-width: 1;
            stroke: #28e787;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-dasharray: 0, 0;
            stroke-dashoffset: 0;
            animation: lineMove 7s linear infinite;
          }
          @keyframes lineMove {
            0% {
              stroke-dasharray: 0, 1050;
            }
            100% {
              stroke-dasharray: 1050, 1050;
            }
          }
        }
      }
    }
  }
}
</style>


